﻿Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.layout.container.Border'
    ]);

Ext.onReady(function () {


    //Cria o modelo do Call
    Ext.define('Call', {
        extend: 'Ext.data.Model',
        fields: [
	           { name: 'Id', type: 'int' },
	           { name: 'Subject', type: 'string' },
               { name: 'Timestamp', type: 'date' },
               { name: 'AuthorName', type: 'string' },
               { name: 'AuthorParentBusinessName', type: 'string' },
               { name: 'StatusId', type: 'int' },
               { name: 'StatusName', type: 'string' },
               { name: 'StatusDependency', type: 'int' },
               { name: 'StatusConclusive', type: 'boolean' }
	        ],
        idProperty: 'Id'
    });

    //Cria data store para usar na grid
    var dsCall = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Call',
        storeId: 'Id',
        proxy: {
            type: 'rest',
            url: '../Call/GetAll',
            reader: {
                type: 'json',
                root: 'calls'
            },
            writer: {
                type: 'json'
            }
        }
    });


    //Cria grid que aparece na view
    var grid = Ext.create('Ext.grid.Panel', {
        store: dsCall,
        stateful: true,
        collapsible: true,
        multiSelect: true,
        stateId: 'stateGrid',
        collapsible: false,
        fit: true,
        columns: [
            {
                text: 'Abrir',
                width: 60,
                renderer: function (val) { return '<input type="image" src="../../Content/Themes/Aliasis/zoom.png" value="Visualizar" onClick="openCall(' + val + ');"/>'; },
                align: 'center',
                dataIndex: 'Id'
            },
            {
                text: 'Ver',
                width: 60,
                renderer: function (val) { return '<input id="show-btn" type="image" src="../../Content/Themes/Aliasis/application_view_tile.png" value="Pré-Visualizar" onClick="openPreview(' + val + ');"/>'; },
                align: 'center',
                dataIndex: 'Id'
            },
            {
                text: 'Código',
                flex: 0,
                sortable: true,
                width: 80,
                dataIndex: 'Id',
                renderer: function (val) { return '<div class="idCol">' + val.toString() + '</div>'; }
            },
            {
                text: 'Assunto',
                sortable: true,
                width: 370,
                dataIndex: 'Subject'
            },
            {
                text: 'Data',
                sortable: true,
                dataIndex: 'Timestamp'
            },
            {
                text: 'Requisitante',
                sortable: true,
                dataIndex: 'AuthorName'
            },
            {
                text: 'Empresa',
                width: 150,
                sortable: true,
                dataIndex: 'AuthorParentBusinessName'
            },
            {
                text: 'Status',
                width: 150,
                sortable: true,
                dataIndex: 'StatusName'
            }
        ],
        height: 350,
        width: "100%",
        //        title: 'Chamados',
        //        renderTo: 'grid-calls',

        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Criar chamado',
                iconCls: 'iconAdd',
                handler: function () {
                    window.location = "Call/Create";
                }
            }]
        }],

        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        }
    });

    //Cria store da árvore de opções 
    var OptTreeStore = Ext.create('Ext.data.TreeStore', {
        root:
        {
            expanded: true,
            children:
            [
                {
                    text: "Pendência", expanded: true, collapsible: false,
                    children:
                    [
                        {
                            text: "Todos",
                            id: 'PENDENCY-ALL',
                            leaf: true
                        },
                        {
                            text: "Empresa", leaf: true,
                            id: 'PENDENCY-BUSINESS'
                        },
                        {
                            text: "Cliente", leaf: true,
                            id: 'PENDENCY-CLIENT'
                        }
                    ]
                },
                {
                    text: "Estado", expanded: true, collapsible: false,
                    children:
                    [
                        {
                            text: "Todos",
                            id: 'STATE-ALL',
                            leaf: true
                        },
                        {
                            text: "Não concluídos", leaf: true,
                            id: 'STATE-INCOMPLETE'
                        },
                        {
                            text: "Concluídos", leaf: true,
                            id: 'STATE-COMPLETE'
                        }
                    ]
                }
            ]
        }
    });


    //Extensão para sobrepor um item da filtragem
    //se a seção deste item já existir em uma array
    //se não existir, ele apenas adiciona o item
    if (!Array.prototype.overwriteItemWith) {
        Array.prototype.overwriteItemWith = function (arr) {
            var len = this.length;
            var overWritten = false;

            for (var i in this) {
                if (this[i][0] == arr[0]) {
                    this[i] = arr;
                    overWritten = true;
                }
            }

            if (!overWritten)
                this.add(arr);
        };
    }

    //Array de filtros
    var arrFilters = new Array();

    //Declara a string de filtragem
    var strFiltering = "Filtros: ";

    //Cria a árvore de opções
    var OptTree = Ext.create('Ext.tree.Panel', {
        store: OptTreeStore,
        rootVisible: false,
        height: '80%',
        layout: 'fit',
        listeners:
        {
            //Verifica em qual dos botões o cliente clicou e filtra a grid
            itemclick: function (view, rec, item, index, eventObj) {

                //Array de nomeação da seção
                //Guiar-se pela treeStore
                var arrSectionNames = new Array();
                arrSectionNames[0] = "Pendência";
                arrSectionNames[1] = "Estado";

                //Arrays sendo adicionadas significam:
                //(     0         ,       1       ,       2        ,      3        )
                //(Número da seção, Nome do filtro, Valor do Filtro, Nome do Filtro)
                var arrItem = new Array(null, null, null, null);

                if (rec.get('id') == 'PENDENCY-ALL')
                    arrItem = new Array(0, null, null);

                if (rec.get('id') == 'PENDENCY-BUSINESS')
                    arrItem = new Array(0, "StatusDependency", 1);

                if (rec.get('id') == 'PENDENCY-CLIENT')
                    arrItem = new Array(0, "StatusDependency", 0);

                if (rec.get('id') == 'STATE-ALL')
                    arrItem = new Array(1, null, null);

                if (rec.get('id') == 'STATE-INCOMPLETE')
                    arrItem = new Array(1, "StatusConclusive", false);

                if (rec.get('id') == 'STATE-COMPLETE')
                    arrItem = new Array(1, "StatusConclusive", true);

                //Adiciona o título a array do item
                arrItem[3] = rec.get('text');

                //Adiciona ou sobrescreve item (se este já tiver uma seção adicionada)
                arrFilters.overwriteItemWith(arrItem);

                //Limpa todos os filtros
                dsCall.clearFilter();

                //Cria array das seções não filtradas
                var nonFiltered = new Array();

                //Zera a filtragem
                strFiltering = "";

                for (var i in arrFilters) {

                    //Verifica se a seção do botão está na lista de não filtradas
                    if (nonFiltered.indexOf(arrFilters[i][0]) < 0) {

                        //Se não estiver, verifica se o usuário está tentando filtrar por todos
                        if (arrFilters[i][1] == null) {
                            //Se o usuário estiver tentando filtrar por todos
                            //adiciona a seção na lista de não filtrados se ele
                            //não existir lá
                            if (nonFiltered[nonFiltered.indexOf(arrFilters[i][0])] < 0)
                                nonFiltered[nonFiltered.length] = arrFilters[i][0];
                        } else {
                            //Se ele estiver tentando filtrar por outro campo
                            //usa o filter do dsCall para filtrar e retira
                            //a seção da lista de não filtrados
                            dsCall.filter(arrFilters[i][1], arrFilters[i][2]);
                            nonFiltered[nonFiltered.indexOf(arrFilters[i][0])] = null;
                        }

                        //Montar a string da informação da filtragem                        
                        strFiltering += "<b>" + arrSectionNames[arrFilters[i][0]].toString() + "</b>" + " -> " + arrFilters[i][3].toString() + "<br/>";
                        pnlFilter.update({ html: strFiltering });
                    }
                }
            }
        }
    });

    //Painel de filtragem
    var pnlFilter = Ext.create('Ext.Panel', {
        height: '10%',
        layout: 'fit'
    });

    //Layout da página
    var layout = Ext.create('Ext.panel.Panel', {
        layout: 'border',
        renderTo: 'layout-calls',
        width: '100%',
        height: 500,
        defaults: {
            collapsible: true,
            split: true
        },
        items: [
            {
                title: 'Navegação',
                region: 'west',
                margins: '5 0 0 0',
                cmargins: '5 5 0 0',
                width: '15%',
                height: '100%',
                minSize: 100,
                maxSize: 250,
                layout: 'fit',
                items: [OptTree]
            },
            {
                title: 'Chamados',
                collapsible: false,
                layout: 'fit',
                region: 'center',
                //            margins: '5 0 0 0',
                items: [grid]
            }]

    });

     

});